<template>
  <div>
    <el-form :inline="true" :model="data" size="small" label-width="100px">
      <div class="avatar-container">
        <el-tooltip effect="dark" placement="right" style="float: left">
          <div slot="content">点击修改头像<br>图片大小不超过1MB</div>
          <el-upload
            action=""
            :auto-upload="false"
            :show-file-list="false"
            accept=".png, .jpg, .jpeg"
            :on-change="selectAvatar"
          >
            <el-avatar :size="100" :src="original.avatar" fit="cover">
              <img
                alt=""
                src=""
              >
            </el-avatar>
          </el-upload>
        </el-tooltip>
        <div class="avatar-right">
          <div>
            <el-form-item label="讲师名称：" prop="name">
              <el-input v-model="data.name" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item v-if="original.status" label="审核状态：" prop="status">
              <el-tag v-if="original.status==='PASS'" type="success" size="small">正常</el-tag>
              <el-tag v-if="original.status==='AUDITING'" type="" size="small">待审核</el-tag>
              <el-tag v-if="original.status==='NOT_PASS'" type="danger" size="small">不通过</el-tag>
            </el-form-item>
          </div>
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model="data.mobile" placeholder="请输入昵称"/>
          </el-form-item>
          <el-form-item label="邮箱地址：" prop="email">
            <el-input v-model="data.email" placeholder="请输入昵称"/>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="分成比例：" prop="division">
        <el-input-number v-model="data.division" :min="50" :max="100" style="width: 160px"/>
      </el-form-item>
      <el-form-item label="排序：" prop="sort">
        <el-input-number v-model="data.sort" style="width: 160px"/>
      </el-form-item>
    </el-form>
    <el-form :model="data" size="mini" label-width="100px">
      <el-form-item label="讲师简介：" prop="intro" class="block">
        <el-input
          v-model="data.intro"
          :rows="7"
          type="textarea"
          maxlength="1023"
          show-word-limit
          placeholder="为该讲师添加简介"
        />
      </el-form-item>
      <el-form-item label="简历：" prop="intro">
        <el-tooltip effect="dark" placement="right" style="float: left">
          <div slot="content">简历大小不超过5MB</div>
          <el-upload
            action=""
            :auto-upload="false"
            :show-file-list="false"
            accept=".png, .jpg, .jpeg, .pdf"
            :on-change="selectResume"
          >
            <el-button size="small" type="primary">点击上传简历</el-button>
          </el-upload>
        </el-tooltip>
        <div class="ellipse" style="margin-left: 24px;display: inline-block;width: 60%" :title="resumeName">
          {{ resumeName }}
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import {getInfo} from '@/api/teacher'
import {jsonObj2FormData} from '@/utils'

export default {
  name: 'EduTeacherAddUpdate',
  data() {
    return {
      original: {
        avatar: ''
      },
      data: {
        id: 0,
        name: '',
        mobile: '',
        email: '',
        intro: '',
        sort: 0,
        division: 80,
        resumeFile: null
      },
      resumeName: ''
    }
  },
  created() {

  },
  methods: {
    setData(data) {
      getInfo(data.id).then(resp => {
        this.original = resp.data
        Object.keys(this.data).forEach((key) => {
          this.data[key] = this.original[key]
        })
      })
    },
    getData() {
      return jsonObj2FormData(this.data)
    },
    selectAvatar(file) {
      this.original.avatar = URL.createObjectURL(file.raw)
      this.data.file = file.raw
    },
    selectResume(file) {
      this.data.resumeFile = file.raw
      this.resumeName = file.name
    }
  }
}
</script>

<style scoped lang="scss">
.block {
  display: block;
}

.inliblock {
  display: inline-block;
}

.avatar-container {
  position: relative;
  min-height: 120px;

  .avatar-right {
    position: absolute;
    top: 0;
    left: 120px;
  }
}

</style>
